<template>
  <el-container>
    <el-container class="full-container">
      <div class="full">
        <blockquote class="search">
          <div class="table-top-bar">
            <h5 class="title">数据记录明细</h5>
            <el-button
              :size="table.btnSize"
              type="text"
              class="link-btn"
              @click="handleAdd();">新增</el-button>
          </div>
          <el-form
            ref="searchForm"
            :model="queryParams"
            :size="form.size"
            :inline-message="form.inlineMessage"
            :status-icon="form.statusIcon"
            :inline="true"
            label-width="70"
            auto-complete="off">
            <el-form-item
              label="数据ID"
              prop="dataId">
              <el-input
                v-model="queryParams.dataId"
                placeholder="数据ID" />
            </el-form-item>
            <el-form-item>
              <el-button
                :size="table.btnSize"
                type="primary"
                @click="loadData(true)">搜索</el-button>
            </el-form-item>
          </el-form>
        </blockquote>
        <el-table
          v-loading="table.loading"
          :size="table.size"
          :height="tableHeight"
          :highlight-current-row="table.highlightCurrentRow"
          :stripe="table.stripe"
          :border="table.border"
          :data="page.rows"
          :header-row-class-name="table.headerClass"
          row-key="id"
          @sort-change="sortChange">
          <el-table-column
            prop="dataId"
            label="数据ID"
            min-width="100"/>
          <el-table-column
            prop="modelId"
            label="模型ID"
            min-width="100"/>
          <el-table-column
            prop="columnId"
            label="字段iD"
            min-width="100"/>
          <el-table-column
            prop="colName"
            label="字段名称"
            min-width="100"/>
          <el-table-column
            prop="columnAttr"
            label="字段属性名称(小驼峰)"
            min-width="100"/>
          <el-table-column
            prop="dataVal"
            label="数据值"
            min-width="100"/>
          <el-table-column
            fixed="right"
            label="操作"
            width="80"
            class-name="cell-opts"
            align="center">
            <template slot-scope="scope">
              <el-button
                :size="table.cellBtnSize"
                type="text"
                @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          :page-size="queryParams.pageSize?queryParams.pageSize:20"
          :layout="pageLayout"
          :background="pagination.background"
          :small="pagination.small"
          :prev-text="pagination.prevText"
          :next-text="pagination.nextText"
          :current-page="page.curPage ? page.curPage: 1"
          :page-sizes="pagination.pageSizes"
          :total="page.total?page.total:0"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"/>
      </div>
      <el-dialog
        :width="dialog.add.width"
        :title="dialog.add.title"
        :visible.sync="dialog.add.visible"
        :close-on-click-modal="dialog.add.closeOnClickModal"
        :fullscreen="dialog.add.fullscreen"
        :before-close="handleAddClose">
        <el-form
          ref="submitAddForm"
          :model="form.add"
          :size="form.size"
          :rules="rules.add"
          :label-width="form.labelWidth"
          :inline-message="form.inlineMessage"
          :status-icon="form.statusIcon"
          auto-complete="off">
          <el-form-item
            label="数据ID"
            prop="dataId">
            <el-input
              v-model="form.add.dataId"
              placeholder="数据ID"/>
          </el-form-item>
          <el-form-item
            label="模型ID"
            prop="modelId">
            <el-input
              v-model="form.add.modelId"
              placeholder="模型ID"/>
          </el-form-item>
          <el-form-item
            label="字段iD"
            prop="columnId">
            <el-input
              v-model="form.add.columnId"
              placeholder="字段iD"/>
          </el-form-item>
          <el-form-item
            label="字段名称"
            prop="colName">
            <el-input
              v-model="form.add.colName"
              placeholder="字段名称"/>
          </el-form-item>
          <el-form-item
            label="字段属性名称(小驼峰)"
            prop="columnAttr">
            <el-input
              v-model="form.add.columnAttr"
              placeholder="字段属性名称(小驼峰)"/>
          </el-form-item>
          <el-form-item
            label="数据值"
            prop="dataVal">
            <el-input
              v-model="form.add.dataVal"
              placeholder="数据值"/>
          </el-form-item>
        </el-form>
        <span
          slot="footer"
          class="dialog-footer">
          <el-button
            :size="table.btnSize"
            @click="resetForm('submitAddForm','add')">取 消</el-button>
          <el-button
            :size="table.btnSize"
            type="primary"
            @click="submitAdd()">确 定</el-button>
        </span>
      </el-dialog>
      <el-dialog
        :width="dialog.edit.width"
        :title="dialog.edit.title"
        :visible.sync="dialog.edit.visible"
        :close-on-click-modal="dialog.edit.closeOnClickModal"
        :fullscreen="dialog.edit.fullscreen"
        :before-close="handleEditClose">
        <el-form
          ref="submitEditForm"
          :model="form.edit"
          :size="form.size"
          :rules="rules.edit"
          :label-width="form.labelWidth"
          :inline-message="form.inlineMessage"
          :status-icon="form.statusIcon"
          auto-complete="off">
          <el-form-item
            label="数据ID"
            prop="dataId">
            <el-input
              v-model="form.edit.dataId"
              placeholder="数据ID"/>
          </el-form-item>
          <el-form-item
            label="模型ID"
            prop="modelId">
            <el-input
              v-model="form.edit.modelId"
              placeholder="模型ID"/>
          </el-form-item>
          <el-form-item
            label="字段iD"
            prop="columnId">
            <el-input
              v-model="form.edit.columnId"
              placeholder="字段iD"/>
          </el-form-item>
          <el-form-item
            label="字段名称"
            prop="colName">
            <el-input
              v-model="form.edit.colName"
              placeholder="字段名称"/>
          </el-form-item>
          <el-form-item
            label="字段属性名称(小驼峰)"
            prop="columnAttr">
            <el-input
              v-model="form.edit.columnAttr"
              placeholder="字段属性名称(小驼峰)"/>
          </el-form-item>
          <el-form-item
            label="数据值"
            prop="dataVal">
            <el-input
              v-model="form.edit.dataVal"
              placeholder="数据值"/>
          </el-form-item>
        </el-form>
        <span
          slot="footer"
          class="dialog-footer">
          <el-button
            :size="table.btnSize"
            @click="resetForm('submitEditForm','edit')">取 消</el-button>
          <el-button
            :size="table.btnSize"
            type="primary"
            @click="submitEdit()">确 定</el-button>
        </span>
      </el-dialog>
    </el-container>
  </el-container>
</template>
<script>
import Mixin from '@/assets/mixin'
export default {
  name: 'CubeModelDataDetail',
  mixins: [Mixin],
  data() {
    return {
      form: {
        add: {
          dataId: '',
          modelId: '',
          columnId: '',
          colName: '',
          columnAttr: '',
          dataVal: '',
          id: ''
        },
        edit: {
          dataId: '',
          modelId: '',
          columnId: '',
          colName: '',
          columnAttr: '',
          dataVal: '',
          id: ''
        }
      },
      rules: {
        add: {
          dataId: [
            { required: true, message: '请输入数据ID', trigger: 'blur' }
          ],
          modelId: [
            { required: true, message: '请输入模型ID', trigger: 'blur' }
          ],
          columnId: [
            { required: true, message: '请输入字段iD', trigger: 'blur' }
          ],
          colName: [
            { required: true, message: '请输入字段名称', trigger: 'blur' }
          ],
          columnAttr: [
            {
              required: true,
              message: '请输入字段属性名称(小驼峰)',
              trigger: 'blur'
            }
          ],
          dataVal: [
            { required: true, message: '请输入数据值', trigger: 'blur' }
          ],
          id: []
        },
        edit: {
          dataId: [
            { required: true, message: '请输入数据ID', trigger: 'blur' }
          ],
          modelId: [
            { required: true, message: '请输入模型ID', trigger: 'blur' }
          ],
          columnId: [
            { required: true, message: '请输入字段iD', trigger: 'blur' }
          ],
          colName: [
            { required: true, message: '请输入字段名称', trigger: 'blur' }
          ],
          columnAttr: [
            {
              required: true,
              message: '请输入字段属性名称(小驼峰)',
              trigger: 'blur'
            }
          ],
          dataVal: [
            { required: true, message: '请输入数据值', trigger: 'blur' }
          ],
          id: []
        }
      },
      submit: {
        add: {
          url: '/v3/cube/cubeModelDataDetail',
          method: 'POST'
        },
        edit: {
          url: '/v3/cube/cubeModelDataDetail/',
          method: 'PUT'
        }
      },
      url: '/v3/cube/cubeModelDataDetail'
    }
  }
}
</script>
